<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            /*设置宽度为视口(viewport width)宽度的100%*/
            width: 100vw;
            background-color: #5aa4ae;
            height: 120px;
            font-size: 30px;
            color: white;
            top: 0;
            /*使用固定定位 让广告条紧贴html顶部*/
            position: fixed;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            top: 300px;
            position: fixed;

        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem blanditiis culpa ea earum error iste itaque
            laboriosam maxime, molestias necessitatibus nostrum officiis porro possimus quaerat quas quia quisquam vero
            voluptatum!
        </div>
        <div>Asperiores deleniti laborum quae quisquam recusandae. A aliquid asperiores aspernatur beatae consequatur,
            corporis cumque dignissimos, eaque eos, harum illo libero quidem reiciendis rem similique? Dolore enim
            sapiente sint soluta vero?
        </div>
        <div>A aliquam aliquid, corporis, culpa cupiditate deleniti dicta earum enim illo ipsa itaque iure laboriosam
            magni minima modi molestias pariatur quo quod ratione repellat totam voluptatem voluptatibus. Aut, ratione,
            suscipit.
        </div>
        <div>Aspernatur at autem blanditiis commodi dolorem doloribus eaque eos, ex, exercitationem fugit harum incidunt
            iure libero molestias nam neque nihil non officiis quas quos ratione ut vel velit voluptate voluptatibus!
        </div>
        <div>Accusantium architecto aut consequuntur dicta dolor esse eum facere fugit impedit, iste iure, laborum magni
            non provident quae quaerat, reiciendis reprehenderit repudiandae sed sequi suscipit voluptas voluptatum.
            Architecto, iusto voluptas!
        </div>
        <div>A adipisci alias ea earum eius esse ex exercitationem fuga fugiat incidunt ipsa iusto labore laboriosam
            magni molestias nihil nisi nostrum obcaecati omnis porro possimus, reiciendis rem tenetur totam vel.
        </div>
        <div>A ab amet dolor, dolorum magni minus quos repudiandae temporibus velit voluptatum! Aliquid aut consectetur
            cumque dolorum est iste minus molestias reprehenderit sed. Consectetur impedit similique voluptatem!
            Doloremque, impedit ipsa.
        </div>
        <div>Aperiam atque, blanditiis consequuntur delectus doloribus enim labore numquam perferendis, quasi ratione
            reiciendis tenetur voluptatum. Alias debitis deleniti earum eum laudantium libero modi obcaecati odio porro
            voluptatum. Iste, nulla, voluptatibus?
        </div>
        <div>Adipisci at autem cupiditate deleniti doloremque numquam perferendis quas! At exercitationem facere labore
            necessitatibus nobis, nulla quasi! A accusantium ad aut illum incidunt laborum omnis, provident quasi
            sapiente veritatis voluptate?
        </div>
        <div>Accusantium assumenda consectetur eum harum ipsa natus perferendis repudiandae voluptatem? Accusantium amet
            aut, culpa debitis dolores laborum nobis nostrum tempora ut. Debitis itaque officia optio praesentium quos
            tempore vitae voluptas?
        </div>
        <div>Aut, eos quisquam. Ad aliquam architecto asperiores aut consectetur consequatur, eos error fugit, ipsa
            magni modi praesentium recusandae rem vel voluptatum? Accusantium, aliquid asperiores iusto perferendis
            provident quas sit suscipit.
        </div>
        <div>Adipisci animi at debitis delectus, doloremque ducimus eaque enim impedit ipsa maiores numquam pariatur
            praesentium quaerat quibusdam quos rem sed similique sint ut vel vero voluptates voluptatibus? Enim, labore,
            quos?
        </div>
        <div>Aliquid aperiam consequatur dolorem error ex iusto numquam quia recusandae sint! Alias aut consectetur
            culpa cupiditate debitis doloremque doloribus eaque eos fuga laborum magni, molestiae molestias odit.
            Accusantium, cupiditate vero!
        </div>
        <div>Aperiam debitis deserunt doloremque dolorum, ducimus earum esse est id illo incidunt non odit porro
            praesentium quasi quo rem sed tempora tenetur, ut voluptatum! Cum expedita ipsum officiis tempora tempore.
        </div>
        <div>Aspernatur dolores doloribus eaque ipsum, laboriosam quidem quo ullam. Accusamus asperiores at deleniti
            excepturi id obcaecati recusandae voluptates? Ad aliquid consequuntur ducimus eaque laudantium libero nisi
            quibusdam quod ut voluptatum!
        </div>
        <div>Aut itaque necessitatibus nemo praesentium vitae! Ad beatae commodi consectetur corporis debitis deleniti
            dolor ea expedita harum incidunt iusto minima optio, pariatur quidem quisquam recusandae rerum saepe, soluta
            ut vel.
        </div>
        <div>Aperiam, aspernatur aut dolor est expedita id incidunt optio quam unde voluptates. Adipisci asperiores, at
            beatae dolore explicabo fuga inventore nesciunt officia optio perferendis quis saepe sapiente soluta tempora
            voluptatem.
        </div>
        <div>Adipisci beatae, facere fugit odit tempore ut! Doloribus, nisi numquam. Consequuntur deserunt doloribus
            illo incidunt, inventore laudantium maxime nihil nulla omnis quidem repudiandae similique sit tempore ullam
            ut. Possimus, ullam.
        </div>
        <div>Aliquid aperiam, asperiores consectetur ea fuga ipsum modi nobis non officiis quo saepe sed, sequi tenetur.
            At debitis ex excepturi iste laudantium magnam placeat, provident quidem repudiandae, sapiente sed totam!
        </div>
        <div>Adipisci aut commodi incidunt pariatur, quae quam unde. Cumque distinctio ea maiores minus porro ratione
            voluptatem voluptates. Ab adipisci doloremque ea, ex exercitationem explicabo impedit odio quos.
            Consectetur, molestiae, unde!
        </div>
        <div>At blanditiis, corporis debitis eaque enim iste laboriosam nam natus odio, officia praesentium rerum unde
            voluptate. Accusantium autem blanditiis eius, est et fugiat ipsam odio sunt! Atque eligendi laboriosam nemo?
        </div>
        <div>Adipisci culpa cumque doloremque illo in laudantium minus natus odio officia, provident quas quidem
            repellendus tempora unde vel. Ab accusamus assumenda cupiditate doloribus, labore libero placeat quidem
            reiciendis reprehenderit tempora.
        </div>
        <div>Aut doloremque iste libero odit. Eos fugiat incidunt itaque mollitia neque obcaecati omnis. Atque
            distinctio laboriosam molestiae nostrum quod repellat, sed suscipit. Architecto fugit illum nam quo quos,
            recusandae repellendus?
        </div>
        <div>Aut eveniet explicabo iusto nesciunt vel. Accusamus adipisci aperiam assumenda at commodi corporis deleniti
            dicta eum fugit incidunt ipsam ipsum iste nesciunt nisi odio optio quod reiciendis rem totam, voluptates.
        </div>
        <div>Accusamus alias assumenda at commodi debitis ea explicabo illo, illum iste iure iusto neque omnis, quam
            repellendus rerum ut voluptas voluptate! Dolore earum eos et facilis minus provident quaerat voluptas!
        </div>
        <div>Ad amet blanditiis consequuntur cumque dolores doloribus esse facilis, harum, impedit itaque labore
            laboriosam neque nisi nobis non perferendis perspiciatis placeat provident, rerum unde vel veniam
            voluptatibus voluptatum! Et, recusandae?
        </div>
        <div>Aut ea est facilis ipsam magni mollitia nulla obcaecati odit perferendis quae, quo sapiente, sequi
            similique, unde ut voluptates voluptatibus! Accusantium aut impedit mollitia quidem totam. Autem maiores
            nostrum quibusdam?
        </div>
        <div>Animi cupiditate esse et eveniet id impedit molestiae mollitia pariatur, perspiciatis soluta? Alias cumque,
            doloribus error illum iusto modi, nobis nulla quae, saepe similique tempore temporibus veniam veritatis vero
            voluptate.
        </div>
        <div>A est nesciunt optio perferendis sapiente. A amet dolorem dolorum fugit, maiores reprehenderit sunt! Animi
            assumenda dolor enim itaque omnis optio temporibus, totam. Architecto doloremque eligendi exercitationem
            impedit magnam ratione.
        </div>
        <div>Asperiores consequatur libero maxime officia perspiciatis quis recusandae similique unde, velit! Autem,
            deleniti esse illo impedit maxime minima non porro sapiente sequi suscipit! Accusamus assumenda doloremque
            inventore ipsam praesentium quis!
        </div>
        <div>Aspernatur consequatur debitis eos fugiat, nesciunt officia omnis perferendis saepe! Cupiditate dolores
            recusandae sed sequi veniam. Culpa delectus dolores dolorum harum, id officia ut vitae! Nostrum, placeat,
            vel. In, sed!
        </div>
        <div>Cupiditate eius ex incidunt magni numquam ratione sint vero. Accusamus amet animi, culpa, dolor, dolorem
            eos excepturi harum hic iure iusto magnam magni minima numquam omnis quos ullam velit vero.
        </div>
        <div>Accusantium beatae dolore doloribus iusto magnam magni minima molestiae recusandae voluptates? Eligendi est
            nemo porro ullam voluptas? Dicta nam nihil voluptas. Doloribus ducimus eos id itaque omnis perferendis
            voluptas. Fugiat.
        </div>
        <div>Amet, animi assumenda consequatur corporis, cum dicta doloremque ea fugiat id impedit iure magni minima
            odit pariatur quaerat quisquam sunt, suscipit tenetur. Consequatur eaque illum iusto nobis officia placeat
            sequi!
        </div>
        <div>Aliquam culpa, deserunt dicta distinctio ea est fuga fugiat nam natus, neque nulla officia perferendis quae
            quia sit? Adipisci esse expedita modi odit soluta! Dicta, ea, ipsam. Fuga modi, temporibus.
        </div>
        <div>A aperiam aspernatur atque beatae corporis deserunt eos expedita inventore ipsa iste, laborum laudantium
            libero magni minima molestias nulla odit officia perspiciatis provident, quae rerum saepe sapiente soluta,
            suscipit veniam.
        </div>
        <div>Animi assumenda consequuntur cum dolorem ex fugiat ipsa ipsam ipsum iste laborum libero maxime, natus qui,
            rem voluptates. Accusantium aliquam amet aspernatur consequuntur delectus dolore placeat quam repudiandae
            temporibus tenetur?
        </div>
        <div>Accusantium animi debitis eius incidunt ipsam, magni mollitia nam necessitatibus nobis odit placeat
            repellat sit totam? Assumenda atque dicta id laudantium, natus nemo pariatur perferendis quaerat quas quod
            ullam veritatis?
        </div>
        <div>Assumenda delectus enim expedita explicabo fugit illum incidunt, ipsam laboriosam molestias mollitia
            nesciunt quasi qui, quibusdam recusandae, vel velit voluptatibus? Dignissimos doloremque ea ex neque odit
            officia rerum tempora ut!
        </div>
        <div>Amet architecto asperiores at consequatur debitis esse nemo, neque nobis perspiciatis, placeat, quam
            recusandae rem veritatis vero voluptatibus? Alias ea magni maxime placeat sunt vero voluptas. Facilis id
            odio recusandae.
        </div>
        <div>Amet asperiores assumenda beatae labore obcaecati officia perferendis quae, rem suscipit. Aliquam
            consequuntur doloribus earum eum explicabo facilis harum id, ipsa itaque magni necessitatibus nemo provident
            quis saepe temporibus! Amet?
        </div>
        <div>Asperiores aspernatur, blanditiis earum, explicabo facilis id inventore mollitia nemo nostrum nulla odio
            perspiciatis quidem suscipit voluptatem, voluptatum. Adipisci deleniti, enim eveniet harum illum iure labore
            maiores nam possimus quis!
        </div>
        <div>A cum debitis doloribus illum itaque laboriosam laudantium molestiae recusandae suscipit voluptatum. Amet
            animi asperiores beatae eum facilis hic libero natus nostrum perferendis recusandae repellat reprehenderit
            sunt, veniam voluptas voluptatum.
        </div>
        <div>Ad amet architecto culpa deleniti distinctio ducimus exercitationem, explicabo facere, laudantium minus
            nesciunt perferendis, quasi quia quis quisquam quo reiciendis tenetur vitae voluptates voluptatibus. Dicta
            dolor facilis laborum nisi quia!
        </div>
        <div>Alias delectus, doloremque ea est eum itaque magnam molestias neque saepe tenetur unde velit! Ab blanditiis
            dicta, doloribus illo illum impedit, in iure iusto labore magnam nesciunt numquam officiis rerum!
        </div>
        <div>Ab accusantium at atque cum cupiditate debitis, dicta doloremque eos esse est ex explicabo minus, omnis
            optio quam quidem quisquam quod quos, repellendus rerum sit tenetur ut veritatis vitae voluptatum.
        </div>
        <div>Asperiores aut beatae corporis cum debitis delectus dicta, est ex inventore, ipsa laborum libero minima
            quod sint ullam. Animi, cumque eligendi ipsam molestiae nulla officia optio perferendis totam! Cumque,
            soluta!
        </div>
        <div>Beatae commodi impedit ipsam nihil, numquam quo tenetur. Ad aut, corporis doloremque eaque, et
            exercitationem hic ipsam laudantium minima molestias nihil odio odit quod, recusandae tenetur unde vero
            voluptate voluptatem!
        </div>
        <div>Adipisci, alias amet aspernatur aut corporis deserunt dolore doloribus fugit ipsa nemo, ratione
            reprehenderit soluta vitae. Aliquam, architecto aspernatur autem dolore eos in, magni pariatur perspiciatis
            sit unde veniam, voluptas.
        </div>
        <div>Accusamus aspernatur dignissimos dolor dolore dolorem ex excepturi expedita explicabo illo libero, nisi
            numquam officia praesentium quas qui quia quidem quos rerum, veniam veritatis. Aliquam expedita impedit
            officiis placeat vero!
        </div>
        <div>Ab illum numquam quibusdam quo recusandae. Aliquid amet aperiam asperiores at autem consequatur corporis
            cumque dolor eveniet inventore, ipsa ipsam obcaecati officia quia quis saepe sit ut vel velit veniam.
        </div>
        <div>Accusamus assumenda, commodi dolorem dolores dolorum, enim facilis fuga id in, ipsam officiis sequi
            suscipit totam? Amet dolorum eaque esse excepturi, facilis fugiat magni natus perspiciatis provident quaerat
            quas, tempore.
        </div>
        <div>Atque culpa eaque obcaecati omnis qui, quo quod suscipit. Deleniti, dicta laudantium necessitatibus quaerat
            quam quibusdam ratione rerum voluptates voluptatibus. Facere fugit libero maiores numquam, possimus quas
            repellendus? Ab, quasi?
        </div>
        <div>Aperiam consequatur delectus distinctio eum excepturi, hic minima, modi nemo quia repellat repudiandae sit
            tempora tenetur vel, voluptate. Cum excepturi facilis laudantium minus molestiae non similique. Assumenda
            distinctio dolores nulla!
        </div>
        <div>Aliquid blanditiis consectetur delectus distinctio doloremque, earum eius facere illo inventore ipsum
            laborum libero magni modi molestiae molestias mollitia nisi nostrum odit omnis placeat possimus provident
            quaerat reprehenderit tenetur vel.
        </div>
        <div>Ipsum, minima quasi. Adipisci alias aperiam assumenda autem consequuntur dignissimos, distinctio dolor
            doloremque eos id laboriosam libero, minus molestias possimus quod quos sed ullam vitae voluptate
            voluptatum? Corporis deleniti, facere!
        </div>
        <div>Ad deleniti ea eveniet impedit iusto nihil porro rerum saepe sequi. Adipisci, aliquam architecto at
            blanditiis corporis, cum dicta et illum in itaque provident quos repellendus, reprehenderit totam velit
            veniam?
        </div>
        <div>Aspernatur consectetur culpa cumque doloremque ea eum itaque libero nemo quidem. Deleniti, dolore magni.
            Architecto assumenda dicta distinctio dolorem hic illo impedit itaque labore obcaecati officia quae,
            quibusdam reprehenderit repudiandae.
        </div>
        <div>Alias dolores necessitatibus sunt. Delectus facere officia praesentium sint? Ad, alias aspernatur at beatae
            blanditiis eius et, eum exercitationem laudantium molestias numquam odit perferendis perspiciatis quo
            reiciendis rerum tenetur voluptate?
        </div>
        <div>Accusamus amet asperiores deserunt dignissimos distinctio doloribus dolorum eos est eveniet ex expedita
            inventore magnam minima, minus nam officia pariatur repellendus voluptates? Alias error expedita
            necessitatibus odio soluta! Dignissimos, illo.
        </div>
    </div>
</body>
</html>